import React from 'react'
import {Link} from 'react-router-dom'
import {Card} from 'primereact/card'
import {Dropdown} from 'primereact/dropdown'
import {InputText} from 'primereact/inputtext'
import {Button} from 'primereact/button'
import {DataTable} from 'primereact/datatable'
import {Column} from 'primereact/column'

class RamTrend extends React.Component{
  render(){
    return [
      <Card>
        <div className="p-g">
          <div className="p-g-2">
            <div>RAM价格(每KB)</div>
            <p>0.1214EOS</p>
          </div>

          <div className="p-g-1">
            <div>1分钟</div>
            <p style={{color:'red'}}>0.99%</p>
          </div>

          <div className="p-g-1">
            <div>10分钟</div>
            <p style={{color:'green'}}>0.99%</p>
          </div>

          <div className="p-g-1">
            <div>60分钟</div>
            <p style={{color:'green'}}>0.99%</p>
          </div>

          <div className="p-g-1"></div>

          <div className="p-g-2">
            <div>市场平均持仓成本</div>
            <p>0.2664</p>
          </div>

          <div className="p-g-2">
            <div>EOS价格</div>
            <p>5.35USD</p>
          </div>

          <div className="p-g-2">
            <div>售出RAM</div>
            <p>44.41G/70.97G</p>
          </div>
        </div>
      </Card>,
      <div className="p-g">
        <div className="p-g-6">总耗费：234562345.789 EOS</div>
        <div className="p-g-6">总手续费：12345.678 EOS</div>
      </div>
    ]
  }
}

class RamFilterSelect extends React.Component{
  constructor(){
    super()

    this.state={
      RamFilter:null
    }

    this.onRamFilterChange=this.onRamFilterChange.bind(this)
  }

  onRamFilterChange(e){
    this.setState({RamFilter:e.value})
  }

  render(){
    const RamFilterItems=[
      {name:'100以上', code:'100'},
      {name:'50-100', code:'50'},
      {name:'0-50', code:'0'}
    ]
    return (
      <Dropdown 
        value={this.state.RamFilter} 
        options={RamFilterItems} 
        onChange={this.onRamFilterChange} 
        style={{width:'100px'}} 
        placeholder="100以上" 
        optionLabel="name"
      />
    )
  }
}

class RamList extends React.Component{
  constructor(){
    super()

    this.state={
      assets:[
        {
          txid: '1',
          time: '2', 
          account:'3', 
          type:'4',
          totalPrice:'5',
          price:'6'
        },
        {
          txid: '1',
          time: '2', 
          account:'3', 
          type:'4',
          totalPrice:'5',
          price:'6'
        },
        {
          txid: '1',
          time: '2', 
          account:'3', 
          type:'4',
          totalPrice:'5',
          price:'6'
        },
        {
          txid: '1',
          time: '2', 
          account:'3', 
          type:'4',
          totalPrice:'5',
          price:'6'
        },
        {
          txid: '1',
          time: '2', 
          account:'3', 
          type:'4',
          totalPrice:'5',
          price:'6'
        },
      ]
    }
  }

  render(){
    return (
      <DataTable value={this.state.assets}>
        <Column field="txid" header="TXid" />
        <Column field="time" header="时间" />
        <Column field="account" header="账户" />
        <Column field="type" header="类型" />
        <Column field="totalPrice" header="金额(EOS)" />
        <Column field="price" header="单价(EOS/KB)" />
      </DataTable>
    )
  }
}

class RamContent extends React.Component{
  render() {
    return [
      <div className="p-g">
        <div className="p-g-8">
          <span style={{ marginRight: '10px' }}>过滤数量：</span>
          <RamFilterSelect />
          <span style={{ marginLeft: '10px' }}>最近两三分钟内的交易不会被展示</span>
        </div>

        <div className="p-g-3 p-fluid p-inputgroup">
            <InputText placeholder="Keyword"/>
            <Button icon="pi pi-search" className="p-button-primary"/>
        </div>

        <div className="p-g-1 p-fluid">
          <Button label="重置" className="p-button-primary"/>
        </div>
      </div>,

      <Card>
        <div className="p-g">
          <div className="p-g-1">可售RAM</div>
          <div className="p-g-3">499.83MB</div>

          <div className="p-g-1">清仓保本价</div>
          <div className="p-g-3">0.3464 EOS/KB</div>

          <div className="p-g-1">持有EOS</div>
          <div className="p-g-3">473575.64 EOS</div>

          <div className="p-g-1">可售RAM市值</div>
          <div className="p-g-3">473575.64 EOS</div>

          <div className="p-g-1">平均成本价</div>
          <div className="p-g-3">0.2610 EOS/KB</div>

          <div className="p-g-1">总盈利</div>
          <div className="p-g-3">-65473575.64 EOS</div>
        </div>
      </Card>,
      <Card>
        <RamList />
      </Card>
    ]
  }  
}

class RamDetail extends React.Component{
  render(){
    return (
      <div className="p-g">
        <div className="p-g-12">
          <Link to={`/market`}>返回</Link>
        </div>

        <div className="p-g-12">
          <RamTrend />
        </div>

        <div className="p-g-12">
          <RamContent />
        </div>

      </div>
    )
  }
}

export default RamDetail